<template>
<div>
  <swiper class="swiper"  circular="true" autoplay="true" interval="2000" duration="1000">
    <block v-for="(item, index) in movies" :index="index" :key="item">
        <swiper-item>
            <image :src="item.url"  class="slide-image" mode="aspectFill"/>
        </swiper-item>
    </block>
</swiper>
<i-tabs :current="current" @change="handleChange">
    <i-tab key="tab1" title="待完成"></i-tab>
    <i-tab key="tab2" title="已完成"></i-tab>
    <i-tab key="tab3" title="已评价"></i-tab>
</i-tabs>
      <view v-if="tab11" class='tab1'>
        <div class="bigbox">
          <!-- <div v-for="(itemd,idx) of oldList" :key="idx"> -->
        <div class="list" v-for="(item,index) of operation" :key="index">
          <Pending
                :id="item.id"
                :types="item.types"
                :title="item.title"
                :starts="item.starts"
                :teacher="item.teacher"
              />
        <!-- </div> -->
        </div>
      </div>
      <div class="laodMore">
      <div v-show="logStatus === 0">
        <div>上拉加载</div>
      </div>
      <div v-show="logStatus === 1">
        <div>正在加载</div>
      </div>
      <div v-show="logStatus === 2">
        <div>没有更多数据了</div>
      </div>
    </div>
      </view>
      <view v-if="tab12" class='tab2'>
        <!-- <div v-for="(itemd,idx) of oldList" :key="idx"> -->
        <div class="list" v-for="(item,index) of operation" :key="index">
          <completede
                :id="item.id"
                :types="item.types"
                :title="item.title"
                :starts="item.starts"
                :teacher="item.teacher"
              />
        </div>
        <!-- </div> -->
        <div class="laodMore">
      <div v-show="logStatus === 0">
        <div>上拉加载</div>
      </div>
      <div v-show="logStatus === 1">
        <div>正在加载</div>
      </div>
      <div v-show="logStatus === 2">
        <div>没有更多数据了</div>
      </div>
    </div>
      </view>
      <view v-if="tab13" class='tab3'>
        <!-- <div v-for="(itemd,idx) of oldList" :key="idx"> -->
        <div class="list" v-for="(item,index) of operation" :key="index">
          <Reviewed
                :id="item.id"
                :types="item.types"
                :title="item.title"
                :starts="item.starts"
                :teacher="item.teacher"
              />
        </div>
        <!-- </div> -->
        <div class="laodMore">
      <div v-show="logStatus === 0">
        <div>上拉加载</div>
      </div>
      <div v-show="logStatus === 1">
        <div>正在加载</div>
      </div>
      <div v-show="logStatus === 2">
        <div>没有更多数据了</div>
      </div>
    </div>
      </view>


</div>
</template>

<script>
import Pending from "@/components/Pending/index";
import completede from "@/components/completede/index";
import Reviewed from "@/components/Reviewed/index";

export default {
  data () {
    return {
      motto: 'Hello miniprograme',
      userInfo: {
        nickName: 'mpvue'
        // avatarUrl: 'http://mpvue.com/assets/logo.png'
      },
      movies: [
        {url: 'https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/banner@2x.png'},
        {url: 'https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/banner@2x.png'},
        {url: 'https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/banner@2x.png'}
      ],
      current: 'tab1',
      tab11: true,
      tab12: false,
      tab13: false,
      operation: [],
      currentPage:1,
      oldList:[],
      logStatus:0,
    }
  },

  components: {
    Pending,
    completede,
    Reviewed
  },
  watch: {
    currentPage(){
      this.other()
    }
  },
//    onShow(){
//     this.render();
//  },
  onReachBottom(){
    this.onScroll()
  },
  mounted() {
    this.start();
    this.other();
  },
  methods: {
    onScroll(){
      this.logStatus = 1
      if (this.noData === true) {
        this.logStatus = 2
        return false
      }
      setTimeout(() => {
      if(this.oldList.length<this.operation.length/7){
        this.currentPage+=1
        this.logStatus = 0
      }else{
        this.logStatus = 2
          this.noData = true
      }
      },500)
    },
    other(){
       let pages = Math.ceil(this.operation.length / 7);
      const newList=[]
      for (let i = 0; i < pages; i++) {
        let sonList = [];
        sonList = this.operation.slice(i * 7, i * 7 + 7);
        newList.push(sonList);
      }

      this.oldList.push(newList[this.currentPage - 1]);
    },
    start(){
      const schoolstudentid = wx.getStorageSync("loginUserInfo").ID;
        var that = this;
      // 作业
       wx.request({
        url: this.$interfaces.Studenthomework+"/"+schoolstudentid,
        method: "get",
        success: function(res) {
           for(var i=0;i< res.data.data.length;i++){
             var o = {'starts':Date.parse(new Date(res.data.data[i].createdAt)),'id':res.data.data[i].ID,'title':res.data.data[i].schoolhomework.title,"contentswork":res.data.data[i].schoolhomework.text,"teacher":res.data.data[i].schoolhomework.schooluser.name,"types":res.data.data[i].type}
             that.operation.push(o)
           }
        }
      })
       this.operation.sort((a, b) => {
              return a.starts<b.starts?-1:1;
          });
    },
    handleChange (detail) {
      this.current = detail.mp.detail.key
      if (detail.mp.detail.key === 'tab1') {
        this.tab11 = true
        this.tab12 = false
        this.tab13 = false
      } else if (detail.mp.detail.key === 'tab2') {
        this.tab11 = false
        this.tab12 = true
        this.tab13 = false
      }else if (detail.mp.detail.key === 'tab3') {
        this.tab11 = false
        this.tab12 = false
        this.tab13 = true
      }
    },
    bindViewTap () {
      const url = '../logs/main'
      if (mpvuePlatform === 'wx') {
        mpvue.switchTab({ url })
      } else {
        mpvue.navigateTo({ url })
      }
    },
    clickHandle (ev) {
      console.log('clickHandle:', ev)
      // throw {message: 'custom test'}
    }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 150px;
}

.form-control {
  display: block;
  padding: 0 12px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
}
.all{
  width:7.5rem;
  height:1rem;
  background-color:blue;
}
.all:after{
  display:block;
  content:'';
  clear:both;
}
.left{
  float:left;
  width:3rem;
  height:1rem;
  background-color:red;
}

.right{
  float:left;
  width:4.5rem;
  height:1rem;
  background-color:green;
}
.swiper-item{
  width: 100%;
  display: block;
  height: 150px;
}
.slide-image{
   height: 100%;
    width: 100%;
    display: inline-block;
    overflow: hidden;
}
.swiper{
  height: 260rpx;
    width: 100%;
}
.laodMore {
    padding-top: 8px;
    padding-bottom: 8px;
    color: #ccc;
    text-align: center;
  }
</style>
